import styled from '@emotion/styled';
import React, { useEffect } from 'react';
import { DraggableProvided } from 'react-beautiful-dnd';
import { useMenuContext } from '../Context/MenuContext';
import { IBusinessName, IBusinessStatus, useBusiness } from '../Context/BusinessContext';
import { ScreenSyncStateProps, useScreenSync } from '../Context/ScreenSyncContext';
import { useTTSBoardCast } from '../Context/TTSBoardCastContext';
import Message from '@/utils/message';
import { useTranslation } from 'react-i18next';
import { isChrome104Plus } from '@/utils/userAgent';

interface IToolProps {
	id: number;
	icon: string;
	text: string;
	type: string;
	provided: DraggableProvided;
	isDraggingOver: boolean;
	activeIcon?: string;
	activeText?: string;
	startIcon?: string;
	disableIcon?: string;
	iconImage?: string;
}

const Container = styled.div`
	width: 76px;
	display: flex;
	flex-flow: column;
	align-items: center;
	padding: 0 14px;
`;

const Text = styled.span`
	width: 78px;
	padding: 4px 0;
	display: inline-block;
	text-align: center;
	font-size: 12px;
`;

const IconSvg = styled.svg`
	width: 48px;
	height: 48px;
	cursor: pointer;
`;

const IconImageWrapper = styled.div`
	width: 48px;
	height: 48px;
	cursor: pointer;
	background: #fafafa;
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
`;
const IconImage = styled.img`
	width: 32px;
	height: 32px;
`;

const ToolItem = (props: IToolProps) => {
	const { t } = useTranslation();
	const { chooseBusiness } = useMenuContext();
	const { record, cancelBusiness, whiteBoardBtnStatus, setWhiteBoardBtnStatus, sharePdfBtnStatus, setSharePdfBtnStatus, recordRegion } = useBusiness();
	const { screenSyncState, setScreenSyncState } = useScreenSync();
	const { TTSBoardCastStats, setTTSBoardCastStats, setEditModal, setBoardCastModal } = useTTSBoardCast();
	const { icon, text, id, provided, isDraggingOver, type = '', activeIcon = '', activeText = '', startIcon = '', disableIcon = '' } = props;

	const getMenuItem = (type: string) => {
		if (type === 'record-screen' && record().recordStatus === IBusinessStatus.IN_PROGRESS) {
			return (
				<IconSvg className="widget-icon" aria-hidden="true" onClick={() => cancelBusiness(record().clientId, IBusinessName.RECORD_SCREEN)}>
					<use xlinkHref={activeIcon}></use>
				</IconSvg>
			);
		} else if (type === 'shared-whiteboard' && whiteBoardBtnStatus() !== 'default') {
			return (
				<IconSvg className="widget-icon" aria-hidden="true" onClick={() => (whiteBoardBtnStatus() === 'open' ? setWhiteBoardBtnStatus('stow') : setWhiteBoardBtnStatus('open'))}>
					<use xlinkHref={activeIcon}></use>
				</IconSvg>
			);
		} else if (type === 'shared-pdf' && sharePdfBtnStatus() !== 'default') {
			return (
				<IconSvg className="widget-icon" aria-hidden="true" onClick={() => (sharePdfBtnStatus() === 'open' ? setSharePdfBtnStatus('stow') : setSharePdfBtnStatus('open'))}>
					<use xlinkHref={activeIcon}></use>
				</IconSvg>
			);
		} else if (type === 'tts-broadcast') {
			switch (TTSBoardCastStats()) {
				case 'idle':
					return (
						<IconSvg className="widget-icon" aria-hidden="true" onClick={() => Message.normal(t('tts-broadcast-disable'))}>
							<use xlinkHref={icon}></use>
						</IconSvg>
					);
				case 'default':
					return (
						<IconSvg className="widget-icon" aria-hidden="true" onClick={() => setEditModal(true)}>
							<use xlinkHref={activeIcon}></use>
						</IconSvg>
					);
				case 'open':
					return (
						<IconSvg
							className="widget-icon"
							aria-hidden="true"
							onClick={() => {
								setTTSBoardCastStats('stow');
								setBoardCastModal(true);
							}}
						>
							<use xlinkHref={startIcon}></use>
						</IconSvg>
					);
				case 'stow':
					return (
						<IconSvg
							className="widget-icon"
							aria-hidden="true"
							onClick={() => {
								setTTSBoardCastStats('open');
								setBoardCastModal(false);
							}}
						>
							<use xlinkHref={startIcon}></use>
						</IconSvg>
					);
				default:
					break;
			}
		} else if (type === 'start-screen-sync') {
			if (screenSyncState().status === 'idle') {
				return (
					<IconSvg className="widget-icon" aria-hidden="true" onClick={() => chooseBusiness(type)}>
						<use xlinkHref={icon}></use>
					</IconSvg>
				);
			}

			if (screenSyncState().cmdId) {
				return (
					<IconSvg className="widget-icon" aria-hidden="true" onClick={() => chooseBusiness(type)}>
						<use xlinkHref={startIcon}></use>
					</IconSvg>
				);
			}

			if (screenSyncState().status === 'start') {
				return (
					<IconSvg className="widget-icon" aria-hidden="true" onClick={() => chooseBusiness(type)}>
						<use xlinkHref={activeIcon}></use>
					</IconSvg>
				);
			}
		} else if (type === 'regional-screen-recording') {
			if (!isChrome104Plus()) {
				return (
					<IconSvg className="widget-icon" aria-hidden="true" onClick={() => chooseBusiness(type)}>
						<use xlinkHref={disableIcon}></use>
					</IconSvg>
				);
			}
			if (recordRegion().recordStatus === IBusinessStatus.IN_PROGRESS) {
				return (
					<IconSvg className="widget-icon" aria-hidden="true" onClick={() => cancelBusiness(recordRegion().clientId, IBusinessName.REGIONAL_SCREEN_RECORDING)}>
						<use xlinkHref={activeIcon}></use>
					</IconSvg>
				);
			} else {
				return (
					<IconSvg className="widget-icon" aria-hidden="true" onClick={() => chooseBusiness(type)}>
						<use xlinkHref={icon}></use>
					</IconSvg>
				);
			}
		} else {
			return (
				<IconSvg className="widget-icon" aria-hidden="true" onClick={() => chooseBusiness(type)}>
					<use xlinkHref={icon}></use>
				</IconSvg>
			);
		}
	};

	const getMenuItemText = (type: string) => {
		if (type === 'record-screen' && record().recordStatus === IBusinessStatus.IN_PROGRESS) {
			return <Text>{t(`${activeText}`)}</Text>;
		} else if (type === 'start-screen-sync') {
			if (screenSyncState().cmdId) {
				return <Text style={{ color: '#DE0112' }}>{screenSyncState().mode === 'large' ? t(`${activeText}`) : t(`${text}`)}</Text>;
			} else {
				return <Text>{t('screen-sync')}</Text>;
			}
		} else if (type === 'tts-broadcast') {
			switch (TTSBoardCastStats()) {
				case 'idle':
					return <Text style={{ color: '#D8D8D8' }}>{t('tts-broadcast')}</Text>;
				case 'default':
					return <Text>{t('tts-broadcast')}</Text>;
				case 'open':
					return <Text style={{ color: '#DE0112' }}>{t(`${text}`)}</Text>;
				case 'stow':
					return <Text style={{ color: '#DE0112' }}>{t(`${activeText}`)}</Text>;
				default:
					break;
			}
		} else if (type === 'shared-whiteboard') {
			switch (whiteBoardBtnStatus()) {
				case 'default':
					return <Text>{t('share-whiteboard')}</Text>;
				case 'open':
					return <Text style={{ color: '#DE0112' }}>{t(`${text}`)}</Text>;
				case 'stow':
					return <Text style={{ color: '#DE0112' }}>{t(`${activeText}`)}</Text>;
				default:
					break;
			}
		} else if (type === 'shared-pdf') {
			switch (sharePdfBtnStatus()) {
				case 'default':
					return <Text>{t('share-pdf')}</Text>;
				case 'open':
					return <Text style={{ color: '#DE0112' }}>{t(`${text}`)}</Text>;
				case 'stow':
					return <Text style={{ color: '#DE0112' }}>{t(`${activeText}`)}</Text>;
				default:
					break;
			}
		} else if (type === 'regional-screen-recording' && recordRegion().recordStatus === IBusinessStatus.IN_PROGRESS) {
			return <Text>{t(`${activeText}`)}</Text>;
		} else {
			return <Text>{t(`${text}`)}</Text>;
		}
	};

	return (
		<Container {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
			{getMenuItem(type)}
			{getMenuItemText(type)}
		</Container>
	);
};

export default ToolItem;
